<script>
export default {
  name: "directivePage",
  data() {
    return {
      value: '',
      col: 'green'
    }
  },
  // 第一种写法
  // directives: {
  //   color1(el, binding) {
  //     console.log(el)
  //     console.log(binding.value)
  //     el.style.color=binding.value
  //   }
  // }
//   第二种写法
  directives:{
    color2:{
      bind(el,binding){
        console.log(binding)
        console.log(111)
        el.focus()
      },
      inserted(el){
        el.focus()
        console.log(222)
      },
      update(el){
        el.focus()
        console.log(333)
      }
    }
  }
}
</script>

<template>
  <div>
    <div v-color="col">1111</div>
    <div v-color="'blue'">2222</div>
    <input type="text" v-color>
    <input type="text" v-color v-model="value">
<!--    <div v-color1="'purple'">888</div>-->
    <input type="text" v-color2 v-model="value">
  </div>
</template>

<style scoped lang="less">

</style>